<template>
  <div class="help-container">
    <!-- 顶部标题栏 -->
    <div class="header">
      <button class="back-btn" @click="goBack">
        <svg class="back-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <path d="M19 12H5M12 19l-7-7 7-7"/>
        </svg>
      </button>
      <h1 class="title">帮助中心</h1>
      <div class="placeholder"></div>
    </div>

    <!-- 搜索框 -->
    <div class="search-section">
      <div class="search-box">
        <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <circle cx="11" cy="11" r="8"/>
          <path d="m21 21-4.35-4.35"/>
        </svg>
        <input
            type="text"
            placeholder="搜索帮助内容..."
            v-model="searchKeyword"
            class="search-input"
        >
      </div>
    </div>

    <!-- 快速导航 -->
    <div class="quick-nav">
      <h2 class="section-title">快速导航</h2>
      <div class="nav-grid">
        <div
            v-for="nav in quickNavItems"
            :key="nav.id"
            class="nav-item"
            @click="scrollToSection(nav.id)"
        >
          <div class="nav-icon" v-html="nav.icon"></div>
          <span class="nav-label">{{ nav.label }}</span>
        </div>
      </div>
    </div>

    <!-- 帮助内容 -->
    <div class="help-content">
      <!-- 系统介绍 -->
      <section id="introduction" class="help-section">
        <h2 class="section-title">
          <svg class="title-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <circle cx="12" cy="12" r="10"/>
            <path d="M9,12l2,2 4-4"/>
          </svg>
          系统介绍
        </h2>
        <div class="section-content">
          <p>欢迎使用模拟股票交易系统！这是一个专为学习和练习股票交易而设计的模拟平台。</p>

          <div class="feature-list">
            <div class="feature-item">
              <h4>🎯 核心功能</h4>
              <ul>
                <li>实时股票行情查看</li>
                <li>模拟买入卖出交易</li>
                <li>持仓管理和盈亏统计</li>
                <li>交易记录查询</li>
                <li>个人资产管理</li>
              </ul>
            </div>

            <div class="feature-item">
              <h4>💡 系统优势</h4>
              <ul>
                <li>零风险学习环境</li>
                <li>真实市场数据模拟</li>
                <li>直观的操作界面</li>
                <li>详细的交易分析</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      <!-- 快速入门 -->
      <section id="getting-started" class="help-section">
        <h2 class="section-title">
          <svg class="title-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <path d="M22 12h-4l-3 9L9 3l-3 9H2"/>
          </svg>
          快速入门
        </h2>
        <div class="section-content">
          <div class="step-guide">
            <div class="step-item">
              <div class="step-number">1</div>
              <div class="step-content">
                <h4>注册账户</h4>
                <p>创建您的模拟交易账户，系统将为您提供虚拟资金开始交易。</p>
              </div>
            </div>

            <div class="step-item">
              <div class="step-number">2</div>
              <div class="step-content">
                <h4>浏览股票</h4>
                <p>在股票列表中查看实时行情，选择您感兴趣的股票进行分析。</p>
              </div>
            </div>

            <div class="step-item">
              <div class="step-number">3</div>
              <div class="step-content">
                <h4>执行交易</h4>
                <p>根据市场分析，执行买入或卖出操作，系统会实时更新您的持仓。</p>
              </div>
            </div>

            <div class="step-item">
              <div class="step-number">4</div>
              <div class="step-content">
                <h4>监控投资</h4>
                <p>在持仓页面查看您的投资组合表现，分析盈亏情况。</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 交易指南 -->
      <section id="trading-guide" class="help-section">
        <h2 class="section-title">
          <svg class="title-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
          </svg>
          交易指南
        </h2>
        <div class="section-content">
          <div class="guide-tabs">
            <button
                v-for="tab in tradingTabs"
                :key="tab.key"
                class="guide-tab"
                :class="{ 'active': activeTab === tab.key }"
                @click="activeTab = tab.key"
            >
              {{ tab.label }}
            </button>
          </div>

          <div class="tab-content">
            <div v-if="activeTab === 'buy'" class="tab-panel">
              <h4>📈 如何买入股票</h4>
              <ol>
                <li>在股票列表中找到要购买的股票</li>
                <li>点击股票进入详情页面</li>
                <li>点击"买入"按钮</li>
                <li>输入购买数量</li>
                <li>确认当前价格和总金额</li>
                <li>点击确认完成购买</li>
              </ol>

              <div class="tip-box">
                <strong>💡 买入提示：</strong>
                <ul>
                  <li>确保账户资金充足</li>
                  <li>注意股票的当前价格</li>
                  <li>考虑分批买入降低风险</li>
                </ul>
              </div>
            </div>

            <div v-if="activeTab === 'sell'" class="tab-panel">
              <h4>📉 如何卖出股票</h4>
              <ol>
                <li>在持仓页面查看您持有的股票</li>
                <li>选择要卖出的股票</li>
                <li>点击"卖出"按钮</li>
                <li>输入卖出数量（不能超过持有数量）</li>
                <li>确认卖出价格和收入金额</li>
                <li>点击确认完成卖出</li>
              </ol>

              <div class="tip-box">
                <strong>💡 卖出提示：</strong>
                <ul>
                  <li>只能卖出已持有的股票</li>
                  <li>卖出价格以当前市价为准</li>
                  <li>及时止损止盈很重要</li>
                </ul>
              </div>
            </div>

            <div v-if="activeTab === 'portfolio'" class="tab-panel">
              <h4>📊 持仓管理</h4>
              <p>持仓页面显示您当前的投资组合：</p>
              <ul>
                <li><strong>持有数量：</strong>您当前持有的股票数量</li>
                <li><strong>总成本/净收益：</strong>正数表示投入成本，负数表示卖出收益</li>
                <li><strong>持仓状态：</strong>显示是否仍在持有中</li>
              </ul>

              <div class="tip-box">
                <strong>💡 管理建议：</strong>
                <ul>
                  <li>定期检查投资组合表现</li>
                  <li>合理分散投资风险</li>
                  <li>设置止损和止盈目标</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 常见问题 -->
      <section id="faq" class="help-section">
        <h2 class="section-title">
          <svg class="title-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <circle cx="12" cy="12" r="10"/>
            <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/>
            <path d="M12 17h.01"/>
          </svg>
          常见问题
        </h2>
        <div class="section-content">
          <div class="faq-list">
            <div
                v-for="(faq, index) in faqItems"
                :key="index"
                class="faq-item"
            >
              <div
                  class="faq-question"
                  @click="toggleFaq(index)"
              >
                <span>{{ faq.question }}</span>
                <svg
                    class="faq-arrow"
                    :class="{ 'expanded': faq.expanded }"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                >
                  <path d="M6 9l6 6 6-6"/>
                </svg>
              </div>
              <div
                  v-if="faq.expanded"
                  class="faq-answer"
              >
                {{ faq.answer }}
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 联系我们 -->
      <section id="contact" class="help-section">
        <h2 class="section-title">
          <svg class="title-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
            <polyline points="22,6 12,13 2,6"/>
          </svg>
          联系我们
        </h2>
        <div class="section-content">
          <p>如果您在使用过程中遇到任何问题，欢迎通过以下方式联系我们：</p>

          <div class="contact-grid">
            <div class="contact-item">
              <div class="contact-icon">📧</div>
              <div class="contact-info">
                <h4>客服邮箱</h4>
                <p>support@stocktrading.com</p>
              </div>
            </div>

            <div class="contact-item">
              <div class="contact-icon">💬</div>
              <div class="contact-info">
                <h4>在线客服</h4>
                <p>工作日 9:00 - 18:00</p>
              </div>
            </div>

            <div class="contact-item">
              <div class="contact-icon">📱</div>
              <div class="contact-info">
                <h4>微信群</h4>
                <p>扫码加入用户交流群</p>
              </div>
            </div>
          </div>

          <div class="feedback-section">
            <h4>意见反馈</h4>
            <p>您的建议对我们很重要，请随时告诉我们您的想法和建议。</p>
            <button class="feedback-btn" @click="openFeedback">
              提交反馈
            </button>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script setup>
import { ref} from 'vue'

// 响应式数据
const searchKeyword = ref('')
const activeTab = ref('buy')

// 快速导航项
const quickNavItems = [
  {
    id: 'introduction',
    label: '系统介绍',
    icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/></svg>'
  },
  {
    id: 'getting-started',
    label: '快速入门',
    icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>'
  },
  {
    id: 'trading-guide',
    label: '交易指南',
    icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>'
  },
  {
    id: 'faq',
    label: '常见问题',
    icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/></svg>'
  }
]

// 交易指南标签
const tradingTabs = [
  { key: 'buy', label: '买入股票' },
  { key: 'sell', label: '卖出股票' },
  { key: 'portfolio', label: '持仓管理' }
]

// FAQ 数据
const faqItems = ref([
  {
    question: '系统使用的是真实股票数据吗？',
    answer: '是的，我们的系统使用真实的股票市场数据进行模拟交易，让您获得最接近真实的交易体验。',
    expanded: false
  },
  {
    question: '模拟交易会产生真实的盈亏吗？',
    answer: '不会，这是纯模拟环境，所有的交易都使用虚拟资金，不会产生任何真实的资金损失或收益。',
    expanded: false
  },
  {
    question: '如何重置我的模拟账户？',
    answer: '您可以在账户设置页面找到"重置账户"选项，重置后将清空所有交易记录并恢复初始资金。',
    expanded: false
  },
  {
    question: '为什么我不能卖出某只股票？',
    answer: '只有当您持有该股票时才能卖出。请检查您的持仓页面确认是否持有足够的股票数量。',
    expanded: false
  },
  {
    question: '股票价格多久更新一次？',
    answer: '我们的系统实时更新股票价格，通常延迟不超过15分钟，与真实市场保持同步。',
    expanded: false
  },
  {
    question: '如何查看我的交易历史？',
    answer: '您可以在"购买记录"和"卖出记录"页面查看完整的交易历史，支持搜索和筛选功能。',
    expanded: false
  },
  {
    question: '系统支持哪些类型的订单？',
    answer: '目前系统支持市价单交易，即按当前市场价格立即执行买入或卖出操作。',
    expanded: false
  },
  {
    question: '如何计算投资收益？',
    answer: '收益 = 卖出总金额 - 买入总成本。在持仓页面可以看到每只股票的成本和当前价值。',
    expanded: false
  }
])

// 方法
const goBack = () => {
  console.log('返回上一页')
}

const scrollToSection = (sectionId) => {
  const element = document.getElementById(sectionId)
  if (element) {
    element.scrollIntoView({ behavior: 'smooth' })
  }
}

const toggleFaq = (index) => {
  faqItems.value[index].expanded = !faqItems.value[index].expanded
}

const openFeedback = () => {
  console.log('打开反馈页面')
}


</script>

<style scoped>
.help-container {
  min-height: 100vh;
  background-color: #000;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  padding: 0 16px;
  padding-bottom: 80px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #333;
}

.back-btn {
  background: none;
  border: 1px solid #444;
  border-radius: 8px;
  padding: 8px;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s;
}

.back-btn:hover {
  border-color: #666;
  background-color: #111;
}

.back-icon {
  width: 20px;
  height: 20px;
}

.title {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
}

.placeholder {
  width: 36px;
}

.search-section {
  margin: 20px 0;
}

.search-box {
  position: relative;
}

.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: #666;
}

.search-input {
  width: 100%;
  background-color: #111;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 12px 12px 12px 40px;
  color: #fff;
  font-size: 16px;
  box-sizing: border-box;
}

.search-input:focus {
  outline: none;
  border-color: #666;
}

.search-input::placeholder {
  color: #666;
}

.quick-nav {
  margin-bottom: 30px;
}

.section-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.title-icon {
  width: 20px;
  height: 20px;
  color: #4ade80;
}

.nav-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.nav-item {
  background-color: #111;
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}

.nav-item:hover {
  background-color: #1a1a1a;
}

.nav-item:active {
  transform: scale(0.98);
}

.nav-icon {
  width: 32px;
  height: 32px;
  margin: 0 auto 8px;
  color: #4ade80;
}

.nav-icon svg {
  width: 100%;
  height: 100%;
}

.nav-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
}

.help-content {
  margin-top: 20px;
}

.help-section {
  margin-bottom: 40px;
  background-color: #111;
  border-radius: 12px;
  padding: 20px;
}

.section-content {
  line-height: 1.6;
}

.section-content p {
  margin-bottom: 16px;
  color: #ccc;
}

.feature-list {
  display: grid;
  gap: 20px;
}

.feature-item h4 {
  margin-bottom: 12px;
  color: #fff;
}

.feature-item ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.feature-item li {
  padding: 4px 0;
  color: #ccc;
}

.feature-item li:before {
  content: "•";
  color: #4ade80;
  margin-right: 8px;
}

.step-guide {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.step-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.step-number {
  width: 32px;
  height: 32px;
  background-color: #4ade80;
  color: #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  flex-shrink: 0;
}

.step-content h4 {
  margin-bottom: 8px;
  color: #fff;
}

.step-content p {
  margin: 0;
  color: #ccc;
}

.guide-tabs {
  display: flex;
  gap: 1px;
  background-color: #333;
  border-radius: 8px;
  padding: 4px;
  margin-bottom: 20px;
}

.guide-tab {
  flex: 1;
  background: none;
  border: none;
  color: #999;
  padding: 12px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.guide-tab.active {
  background-color: #fff;
  color: #000;
}

.tab-content {
  min-height: 200px;
}

.tab-panel h4 {
  margin-bottom: 16px;
  color: #fff;
}

.tab-panel ol, .tab-panel ul {
  margin-bottom: 20px;
  padding-left: 20px;
}

.tab-panel li {
  margin-bottom: 8px;
  color: #ccc;
}

.tip-box {
  background-color: #0a2f1a;
  border: 1px solid #4ade80;
  border-radius: 8px;
  padding: 16px;
  margin-top: 20px;
}

.tip-box strong {
  color: #4ade80;
  display: block;
  margin-bottom: 8px;
}

.tip-box ul {
  margin: 0;
  padding-left: 20px;
}

.tip-box li {
  color: #ccc;
  margin-bottom: 4px;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  background-color: #0a0a0a;
  border-radius: 8px;
  overflow: hidden;
}

.faq-question {
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s;
}

.faq-question:hover {
  background-color: #1a1a1a;
}

.faq-arrow {
  width: 16px;
  height: 16px;
  transition: transform 0.2s;
}

.faq-arrow.expanded {
  transform: rotate(180deg);
}

.faq-answer {
  padding: 0 16px 16px 16px;
  color: #ccc;
  line-height: 1.5;
}

.contact-grid {
  display: grid;
  gap: 20px;
  margin-bottom: 30px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 16px;
  background-color: #0a0a0a;
  padding: 16px;
  border-radius: 8px;
}

.contact-icon {
  font-size: 24px;
  width: 40px;
  text-align: center;
}

.contact-info h4 {
  margin-bottom: 4px;
  color: #fff;
}

.contact-info p {
  margin: 0;
  color: #999;
  font-size: 14px;
}

.feedback-section {
  background-color: #0a0a0a;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
}

.feedback-section h4 {
  margin-bottom: 8px;
  color: #fff;
}

.feedback-section p {
  margin-bottom: 16px;
  color: #ccc;
}

.feedback-btn {
  background-color: #4ade80;
  color: #000;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.feedback-btn:hover {
  background-color: #22c55e;
}

/* 响应式设计 */
@media (max-width: 480px) {
  .help-container {
    padding: 0 12px;
  }

  .title {
    font-size: 20px;
  }

  .nav-grid {
    grid-template-columns: 1fr;
  }

  .help-section {
    padding: 16px;
  }

  .step-item {
    flex-direction: column;
    text-align: center;
  }

  .guide-tabs {
    flex-direction: column;
    gap: 4px;
  }

  .contact-item {
    flex-direction: column;
    text-align: center;
  }
}
</style>